import { Typography } from '@mui/material';
import { MouseEventHandler } from 'react';

import Config from '../../config';
import { DisbursementFlow } from '../../constants/disbursement-flow';
import styles from '../../styles/components/index/home-upload-csv.module.css';
import { GFSButton } from '../shared/button/gfs-button';

interface Props {
    onUploadCSVClick: MouseEventHandler;
    error: boolean;
    flow: DisbursementFlow;
}

const HomeUploadCSV = (props: Props) => {
    return (
        <div className="top-30 bottom-30">
            <div>
                <GFSButton variant="contained" component="label" onClick={props.onUploadCSVClick}>
                    {props.error || props.flow == DisbursementFlow.REVIEW_CSV
                        ? 'Reupload CSV'
                        : 'Upload CSV'}
                </GFSButton>

                <GFSButton
                    variant="outlined"
                    className={styles['download-template']}
                    href={Config.getAPI() + '/sample.csv'}
                    download
                >
                    Download Template
                </GFSButton>
            </div>

            <Typography variant="body2" className="top-40">
                {props.flow != DisbursementFlow.REVIEW_CSV &&
                    props.flow != DisbursementFlow.CSV_ERROR &&
                    'Please upload your CSV to get started'}
            </Typography>
        </div>
    );
};

export default HomeUploadCSV;
